<template>
  <el-card shadow="hover">
    <div class="map-type">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="地图" name="first">
          <div class="map">
            <div class="map-content">
              <div id="container"></div>
            </div>
            <div class="map-button">
              <div class="button-position">
                <el-button type="primary" size="small" @click="clearMap"
                  >重置</el-button
                >
              </div>
              <div class="button-position">
                <el-button type="success" size="small" @click="getPosition"
                  >获取当前地址</el-button
                >
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="有向图" name="second"></el-tab-pane>
      </el-tabs>
    </div>
  </el-card>
</template>

<script>
var map;
var marker;
var gpsArray = [];
var markers = [];
import AMap from "AMap"; // 引入高德原生AMap
import { ElMessage } from "element-plus";

export default {
  data() {
    return { activeName: "first" };
  },
  mounted() {
    this.init();
  },
  methods: {
    //初始化
    init: function () {
      this.initMap();
      this.addPlugin();
      this.bindClickMap();
    },
    //初始化地图
    initMap: function () {
      map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 12,
      });
    },
    //异步同时加载多个插件
    addPlugin: function () {
      AMap.plugin(
        ["AMap.ToolBar", "AMap.Scale", "AMap.Geocoder", "AMap.Driving"],
        function () {
          map.addControl(new AMap.ToolBar());
          map.addControl(new AMap.Scale());
          map.addControl(new AMap.Geocoder());
          map.addControl(new AMap.Driving());
        }
      );
    },
    // 绑定地图点击事件
    bindClickMap: function () {
      map.on("click", this.clickHandler);
    },
    // 添加标记点
    clickHandler: function (e) {
      var gps = [e.lnglat.getLng(), e.lnglat.getLat()]; //获得经纬度
      gpsArray.push(gps); //获得经纬度数组
      if (gpsArray.length > 20) {
        ElMessage({
          message: "不能标记更多了",
          type: "warning",
        });
        return;
      }
      marker = new AMap.Marker({
        position: gps, // 坐标
        //标记
        content:
          '<div style="width:19px;height: 31px; color:white; text-align: center;line-height: 21px;background: url(' +
          "'" +
          "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png" +
          "'" +
          ');}">' +
          gpsArray.length +
          "</div>",
      });
      markers.push(marker); //标记点数组
      map.add(marker); // 将创建的点标记添加到已有的地图实例
    },
    //重置地图
    clearMap: function () {
      map.remove(markers);
      gpsArray = [];
      markers = [];
      this.init();
    },
    //获取地址
    getPosition: function () {
      var str = "";
      var that = this;
      this.$store.dispatch("saveGps", gpsArray);
      var geocoder = new AMap.Geocoder({
        city: "010", //城市设为北京，默认：“全国”
        radius: 1000, //范围，默认：500
      });
      geocoder.getAddress(gpsArray, function (status, result) {
        if (status === "complete" && result.info === "OK") {
          for (var i = 0; i < result.regeocodes.length; i += 1) {
            str = str + result.regeocodes[i].formattedAddress + "\n";
          }
        }
        that.$emit("getposition", str);
        that.$store.dispatch("saveAdd", str);
      });
    },
  },
};
</script>

<style scoped>
#container {
  width: 620px;
  height: 400px;
}
.map {
  margin-top: 5px;
}
.map .map-content {
  width: 620px;
  height: 400px;
  float: left;
}
.map .map-button {
  height: 420px;
  float: left;
}
.button-position {
  margin-top: 10px;
  margin-left: 10px;
}
</style>